<template>
	<view class="audio-player">
		<view class="controls">
			<view class="play-pause" @tap="togglePlayback">
				<image v-if="!isPlaying" class="paly-icon" src="../../static/pause.png" mode=""></image>
				<image  v-else class="paly-icon" src="../../static/play.png" mode="" ></image>
				<!-- <text v-if="!isPlaying">播放</text>
					<text v-else>暂停</text> -->
			</view>
		</view>
		<view class="progress-bar" @touchstart="seekStart" @touchmove="seeking" @touchend="seekEnd">
			<view class="progress" :style="{ width: progress + '%' }"></view>
			<view class="seeker" :style="{ left: seekerLeft + '%' }"></view>
		</view>
		<view style="margin-left:18rpx;font-size: 13px"><text style="color:#000">{{ formatSeconds(currentTime)}} </text><text style="color: #B9B9B9">{{'/' + formatSeconds(duration) }}</text></view>
	</view>
</template>

<script>
export default {
	name: "AudioPlayer",
	props: {
		src: String,
	},
	data() {
		return {
			isPlaying: false,
			audioCtx: null,
			duration: 0,
			currentTime: 0,
			progress: 0,
			seekerLeft: 0,
			isSeeking: false
		};
	},
	created() {
		this.initAudio();
	},
	methods: {
		formatSeconds(seconds) {
			// 计算分钟和秒
			var minutes = Math.floor(seconds / 60);
			var remainingSeconds = Math.round(seconds % 60); // 使用Math.round来四舍五入到最接近的整数秒
			
			// 如果分钟或秒数小于10，则在前面补零
			minutes = minutes.toString().padStart(2, '0');
			remainingSeconds = remainingSeconds.toString().padStart(2, '0');
			
			// 返回格式化的时间字符串
			return `${minutes}:${remainingSeconds}`;
		},
		initAudio() {
			console.log(this.src)
			this.audioCtx = uni.createInnerAudioContext();
			this.audioCtx.src = this.src;
			this.audioCtx.onPlay(() => {
				this.isPlaying = true;
			});
			this.audioCtx.onPause(() => {
				this.isPlaying = false;
			});
			this.audioCtx.onTimeUpdate(() => {
				if (!this.isSeeking) {
					this.currentTime = this.audioCtx.currentTime;
					this.progress = (this.currentTime / this.duration) * 100;
					this.seekerLeft = this.progress;
				}
			});
			this.audioCtx.onEnded(() => {
				this.isPlaying = false;
			});
			this.audioCtx.onError((err) => {
				console.error('音频播放错误:', err);
			});
			this.audioCtx.onCanplay(() => {
				this.duration = this.audioCtx.duration;
			});
		},
		togglePlayback() {
			if (this.isPlaying) {
				this.audioCtx.pause();
			} else {
				this.audioCtx.play();
			}
		},
		seekStart() {
			this.isSeeking = true;
		},
		seeking(event) {
			if (!this.duration) return;
			const rect = uni.getSystemInfoSync().windowWidth - 20;
			const ratio = event.mp.touches[0].pageX / rect;
			console.log(ratio, 'ratio')
			if (ratio <= 0) {
				this.seekerLeft = 0;
			} else if (ratio >= 1) {
				this.seekerLeft = 100;
			} else {
				this.seekerLeft = ratio * 100;
				this.currentTime = ratio * this.duration;
			}
		},
		seekEnd() {
			this.audioCtx.seek(this.currentTime);
			this.isSeeking = false;
		}
	},
	beforeDestroy() {
		if (this.audioCtx) {
			this.audioCtx.pause();
			// 这里你可能还需要做其他清理工作，但通常 uni-app 会自动管理
		}
	}
}
</script>

<style scoped>
.audio-player {
	display: flex;
	align-items: center;
	width: 40%;
	min-height: 96rpx;
	background: transparent!important;
	//box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(74,144,246,0.06);
	border-radius: 24rpx;
	padding: 0rpx 6rpx 0rpx 20rpx!important;
	box-sizing: border-box;
}

.controls {
	display: flex;
	align-items: center;
	justify-content: center;
}

.play-pause {
	font-size: 20px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.paly-icon {
	width: 20rpx;
	height: 20rpx;
}

.progress-bar {
	width: 146rpx;
	height: 12rpx;
	background-color: rgba(114, 122, 142, 0.10);
	border-radius: 6rpx;
	position: relative;
	margin-left: 18rpx!important;
}

.progress {
	height: 100%;
	background-color: #007aff;
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 6rpx;
}

.seeker {
	width: 20rpx;
	height: 20rpx;
	background: #FFFFFF;
	box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.13);
	border: 1rpx solid #2979FF;
	border-radius: 50%;
	position: absolute;
	top: -10rpx;
	transform: translateX(-50%);
	z-index: 1;
}
</style>